<template>
  <div class="chart-wrapper">
    <v-chart :option="chartOptions" autoresize />
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import VChart from 'vue-echarts';

// 定义props
const props = defineProps({
  chartId: {
    type: String,
    required: true
  },
  options: {
    type: Object,
    default: () => ({})
  }
});

// 图表配置
const chartOptions = ref({
  title: {
    text: '矩形树图',
    left: 'center'
  },
  tooltip: {
    formatter: function (info: any) {
      return [
        '<div class="tooltip-title">' + info.name + '</div>',
        '数值: ' + info.value
      ].join('');
    }
  },
  series: [
    {
      name: '矩形树图',
      type: 'treemap',
      visibleMin: 300,
      data: [
        {
          name: '第一部门',
          value: 40,
          children: [
            {
              name: '产品A',
              value: 30
            },
            {
              name: '产品B',
              value: 10
            }
          ]
        },
        {
          name: '第二部门',
          value: 20
        },
        {
          name: '第三部门',
          value: 60,
          children: [
            {
              name: '产品C',
              value: 20
            },
            {
              name: '产品D',
              value: 10
            },
            {
              name: '产品E',
              value: 30
            }
          ]
        }
      ],
      label: {
        show: true,
        formatter: '{b}: {c}'
      },
      upperLabel: {
        show: true,
        height: 30
      },
      itemStyle: {
        borderColor: '#fff'
      },
      levels: [
        {
          itemStyle: {
            borderColor: '#777',
            borderWidth: 0,
            gapWidth: 1
          },
          upperLabel: {
            show: false
          }
        },
        {
          itemStyle: {
            borderColor: '#555',
            borderWidth: 5,
            gapWidth: 1
          },
          emphasis: {
            itemStyle: {
              borderColor: '#ddd'
            }
          }
        }
      ]
    }
  ]
});

// 将传入的options合并到默认配置
watch(() => props.options, (newOptions) => {
  if (newOptions) {
    Object.assign(chartOptions.value, newOptions);
  }
}, { immediate: true });
</script>

<style scoped>
.chart-wrapper {
  width: 100%;
  height: 100%;
}
</style> 